<template>
    <div>
        <Navigation :dataList="categoryTwos" width="1.3rem" :avaterInt="avaterInt" :id="$route.query.sid" @tab="handTab">
            <template>
                <div v-for="(data,index) in categoryTwos"
                :key="index" :slot="index"><GoodListIndex v-if="indexAvater === index" :subCategoryId="data.id" /></div>
            </template>
        </Navigation>
    </div>
</template>

<script>
    import {
        getCategory
    } from "@api/store";
    import Navigation from '@/components/Navigation';
    import GoodListIndex from '@/components/GoodListIndex';
    export default {
        data() {
            return {
                categoryTwos: [],
                avaterInt: 0,
                dataIndex: {},
                indexAvater: 0
            }
        },
        components: {
            Navigation,
            GoodListIndex
        },
        mounted() {
            if (this.$route.query.idItem) {
                this.avaterInt = parseInt(this.$route.query.idItem);
                this.indexAvater = parseInt(this.$route.query.idItem);
                this.dataIndex = this.$route.query;
            }
            this.getCategoryPort();
        },
        methods: {
            /**
             * 菜单列表
             */
            async getCategoryPort() {
                const data = await getCategory().catch(error => console.error(error));
                if (this.$route.query.cid) {
                    let category = data.data.filter(item => { return item.id === +this.$route.query.cid });
                    this.categoryTwos = category[0].children;
                    this.indexAvater = this.categoryTwos.findIndex(item => { return item.id === +this.$route.query.sid });
                    return;
                }
                this.categoryTwos = data.data[parseInt(this.dataIndex.id)].children;
            },
            /**
             * 导航栏点击
             */
            handTab(e, index, data) {
                this.indexAvater = index;
            }
        }
    }
</script>

<style scoped>

</style>